<template>
  <div class="order-page detail-page">
    <headBar  isBack="show">
      <div slot="xm-header-center">
        <div class="xm-header-title" >采购单详情</div>
      </div>
      <div slot="xm-header-right"></div>
    </headBar>
    <div v-for="item in list">
      <div class="order-group">
        <div class="flex flex-pack-justify consignee-info">
          <div>收货人：{{item.nameSub}}</div>
          <div>{{item.phone}}</div>
        </div>
        <p class="address-info border-bottom">收货地址：{{item.addressName}}</p>
        <div class="order-info">
          <p>总价：<price :priceUnit="item.amountTotal" unitName="" ></price></p>
          <p>商品种类：{{item.number}}种</p>
          <p>来源：{{item.supplierName}}</p>
          <p> {{item.supplierName}}</p>
          <p class="flex flex-pack-justify sp">
            <span>采购申请时间：{{item.purchaseDate}}</span>
            <span v-show="item.active" @click="item.active=false">收起</span>
            <span v-show="!item.active" @click="item.active=true">展开</span>
          </p>
        </div>
      </div>
      <div class="cate-group flex border-bottom" v-for="item1 in item.wareInfoList" v-show="item.active">
        <div class="group-left">
          <img :src="item1.mainImage">
        </div>
        <div class="group-right flex-1">
          <h3>{{item1.wareName}}</h3>
          <div class="opts">
            <div class="flex flex-pack-justify">
              <price :priceUnit="item1.pricePiece" unitName="件" ></price>
              <div class="buy-count">购买数量：{{item1.number}}件</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--发货说明-->
    <!--<div class="desc bg-white marginTop20">-->
      <!--<p class="border-bottom">-->
        <!--发货说明：编辑需要用500个字左右，不知道两排字够不够顶多只显示500个字。-->
      <!--</p>-->
    <!--</div>-->
    <!--<div class="status-group bg-white">-->
        <!--<div class="status-item start-item">-->
          <!--<div class="status-item-con">-->
            <!--<h4>订单取消</h4>-->
            <!--<p>2017/09/11 15:33:10</p>-->
          <!--</div>-->
        <!--</div>-->
      <!--<div class="status-item">-->
        <!--<div class="status-item-con">-->
          <!--<h4>订单取消</h4>-->
          <!--<p>2017/09/11 15:33:10</p>-->
        <!--</div>-->
      <!--</div>-->
      <!--<div class="status-item">-->
        <!--<div class="status-item-con">-->
          <!--<h4>订单取消</h4>-->
          <!--<p>2017/09/11 15:33:10</p>-->
        <!--</div>-->
      <!--</div>-->
    <!--</div>-->

  </div>
</template>
<script>
  let userName = '';
  export default {
    props: {},
    data() {
      return {
        orderMainId: null,
        statusOrder: null,
        uniqueCode: null,
        data: {},
        totalMoney: 0,
        goodsNum: 0, //商品种类
        processStatus: 1,
        list: [],
        purchaseDate: ''
      };
    },
    methods: {
      /**
       * 订单详情
       * */
      myPurchaseRequestDetails(){
        myPurchaseRequestDetails({orderMainId: this.orderMainId, statusOrder: this.statusOrder,uniqueCode: this.uniqueCode }).then(data=>{
            if(data.returnCode == '000000'){
                this.purchaseDate = data.result.purchaseDate;
                this.list = this.handData(data.result.purchaseRequestList);
            }
        })
      },
      /**
       * 处理数据
       * */
      handData(list){
        let arr = [];
        for(let i=0; i<list.length; i++){
            let item = list[i];
            item.active = false;
            arr.push(item);
        }
        return arr;
      }
    },
    filters: {
      filterNameSub(name){
        if(name != userName){
          return name;
        }
        return '自己';
      }
    },
    created() {
      userName = Cookie.get('userName');
      this.orderMainId = this.$route.params['orderId'];
      this.statusOrder = this.$route.params['status'];
      this.uniqueCode = this.$route.params['uniqueCode'];
      this.myPurchaseRequestDetails();
    },
    mounted(){

    },
    components: {
    }
  };
</script>
<style lang="less">
  @import "./detail.less";
</style>
